<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设备管理后台</title>
</head>
<link rel='stylesheet' type='text/css' href='easyui/themes/default/easyui.css'>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/css/wu.css" />
<script type="text/javascript" src='easyui/jquery.min.js'></script>
<script type="text/javascript" src='easyui/jquery.easyui.min.js'></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    var menus = [
        {"id":"101","text":"设备管理","attributes":{"url":"toolHtml"}}
        ,{"id":"102","text":"口令管理","attributes":{"url":"passHtml"}}
        ,{"id":"103","text":"故障类型管理","attributes":{"url":"troubleHtml"}}
        // {"id":"103","text":"记录列表","attributes":{"url":"recordHtml"}}
    ];

    $(function(){
        $("#menus").tree({
            data:menus,
            onClick:function(node){
                if(node.attributes.url){
                    addNewTab(node.attributes.url,node.text);
                }
            }
        });
    });

    function addNewTab(url,text){
        //在tabs中新建一个页
        var $tabs = $("#wu-tabs");
        var $tab = $tabs.tabs("getTab",text);
        if(!$tab){
            $tabs.tabs("add",{
                title:text,
                href:url,
                closable:true
            });
        }else{
            $tabs.tabs("select",text);
        }
    }

</script>
<body class='easyui-layout'>

    <!-- begin of header -->
    <div class="wu-header" data-options="region:'north',border:false,split:true">
        <div class="wu-header-left">
            <h1>设备管理后台</h1>
        </div>
        <div class="wu-header-right">
            <p><strong class="easyui-tooltip" title="老翟永远爱你">伏晓</strong>，欢迎您！</p>
            <!--<p><a href="#">网站首页</a>|<a href="#">支持论坛</a>|<a href="#">帮助中心</a>|<a href="#">安全退出</a></p>-->
        </div>
    </div>
    <!-- end of header -->

    <!-- begin of main -->
    <div class="wu-main" data-options="region:'center'">
        <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">
            <div title="首页" data-options="closable:false,iconCls:'icon-tip',cls:'pd3'">专为伏晓设计的设备管理后台</div>
        </div>
    </div>
    <!-- end of main -->
    <div class="wu-sidebar" data-options='region:"west",title:"操作栏",width:150'>
        <ul id='menus'></ul>
    </div>

    <!-- begin of footer -->
    <div class="wu-footer" data-options="region:'south',border:true,split:true">
        &copy; 2018 ZhaiXF All Rights Reserved
    </div>
    <!-- end of footer -->

</body>
</html>